<template>
    <div class="login">
        <!-- 头部 -->
        <!-- 标题 -->
        <h2>密码登录 <p @click="$router.push('/zhuce')">短信验证码登录<van-icon name="arrow" /></p></h2>
        <!-- 表单 -->
         <van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="data.form.mobile"
      name="用户名"
      placeholder="请输入手机号"
      :rules="mobileRules"
    />
    <van-field
      v-model="data.form.password"
      type="password"
      name="密码"
      placeholder="请输入密码"
      :rules="passwordRules"
    />
    <!-- 单选框 -->
    <van-field name="radio">
       <template #input>
          <van-radio-group direction="horizontal">
           <van-radio @click="flag=!flag" :checked="flag"  name="1">
            <p>我已经同意 用户协议 及 隐私条款</p>
           </van-radio>
      
         </van-radio-group>
       </template>
    </van-field>
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block color="#ffc0cb" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>
    </div>
</template>
<script lang="ts" setup>
import { mobileRules, passwordRules} from '@/utils/rules'
import {getLogin} from '@/utils/api'
import {ref,reactive} from 'vue'
import {showNotify,Icon} from 'vant'

import {useRouter} from 'vue-router'
   const router=useRouter()
    const data=reactive({
        form:{
            mobile:'13230000059',
            password:'abc12345'
        }
    })
    const flag = ref(false);
    const onSubmit = (values) => {
      console.log('submit', values);
         if(flag.value==false){
            showNotify({   message: '请勾选用户协议',
          color: '#ccc',
           background: '#fff', });
         }else{
               getLogin(data.form.mobile,data.form.password).then(res=>{
        console.log(res,55);
        localStorage.setItem('token',res.data.token);
        showNotify({ type: 'success', message: '通知内容' });
        router.push('/about')

        
    })
         }
     
    };
  

</script>

<style  scoped>
h2{
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    justify-content: space-between;
    line-height: 50px;
}
h2 >p{
        font-size: 16px;
    }
</style>

